[Day 18] React 實戰：打造健身房後台 Dashboard

2024 iThome 鐵人賽

DAY 18

Modern Web

React 學得動嗎系列第 18 篇

16th鐵人賽 react

Moscle.dev

2024-10-02 23:14:50

105 瀏覽

分享至

今天是Day 18，我們前面學習了許多React的技巧，現在應該要來實作看看。我們來使用 React 開發一個實際的專案 —— 健身房後台 Dashboard。我們將從需求分析到技術選擇，逐步介紹開發這類專案的過程。

專案需求分析

首先，我們來列出這個健身房後台 Dashboard 的核心功能需求：

會員管理：查看、新增、編輯會員資料
教練管理：查看、新增、編輯教練資料
課程排程：安排和管理健身課程
業績報表：生成各種統計報表
RBAC（Role-Based Access Control）：根據用戶角色控制權限

技術選擇

1. UI 套件

在選擇 UI 套件時，我們可以考慮以下幾個選項：

shadcn/ui：輕量、高度可定制，但需要自行實作部分複雜的組件。
Ant Design：功能豐富，開箱即用，但風格相對固定。
Element Plus：類似 Ant Design，也具有全面的功能。

考量到我們需要的靈活性與定制能力，同時又不想從零開始實作複雜組件，我建議選擇 shadcn/ui 作為基礎，並結合其他套件來處理特定需求（如表格管理）。

2. 狀態管理

對於這類中型應用，我推薦使用 Zustand。它簡單輕量，且足夠靈活來應對複雜的應用場景。

3. 路由

使用 React Router 來處理應用中的路由管理。

4. 表格處理

shadcn/ui 沒有內建表格組件，但我們可以使用 TanStack Table （前身為 react-table）來滿足我們對複雜表格管理的需求。

5. 表單處理

使用 React Hook Form 來進行表單邏輯的處理，這樣可以有效管理表單狀態並減少不必要的重渲染。

6. API 請求

使用 Axios 或 TanStack Query（前身為 react-query）來管理 API 請求，根據需求選擇合適的工具來優化請求處理。

專案結構

fitness-dashboard/
├── src/
│   ├── components/         # 可重用的 UI 組件
│   ├── pages/              # 頁面組件
│   ├── layouts/            # 布局組件
│   ├── hooks/              # 自定義 Hooks
│   ├── services/           # API 服務
│   ├── stores/             # Zustand stores
│   ├── utils/              # 工具函數
│   ├── types/              # TypeScript 類型定義
│   └── App.tsx             # 根組件
├── public/                 # 靜態資源
└── package.json

RBAC 實現

在這個專案中，我們可以透過自定義 Hook 來實現基於角色的存取控制 (RBAC)：

// hooks/useAuth.ts
import create from 'zustand';

interface AuthStore {
  user: User | null;
  roles: string[];
  checkPermission: (permission: string) => boolean;
}

const useAuthStore = create<AuthStore>((set, get) => ({
  user: null,
  roles: [],
  checkPermission: (permission) => {
    const { roles } = get();
    return roles.includes(permission);
  },
}));

export const useAuth = () => useAuthStore();

接著，我們可以建立一個權限控制的高階元件 (HOC) 來進行存取控制：

// components/PrivateRoute.tsx
import React from 'react';
import { useAuth } from '../hooks/useAuth';

const PrivateRoute: React.FC<{ permission: string; children: React.ReactNode }> = ({ permission, children }) => {
  const { checkPermission } = useAuth();

  if (!checkPermission(permission)) {
    return <div>無權訪問</div>;
  }

  return <>{children}</>;
};

export default PrivateRoute;

表格實現

使用 TanStack Table 來實作複雜的表格功能：

import { useTable, usePagination, useSortBy } from '@tanstack/react-table';
import { Table } from '@/components/ui/table';

const MembersTable = ({ data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useSortBy,
    usePagination
  );

  return (
    <Table {...getTableProps()}>
      {/* 表格內容 */}
    </Table>
  );
};

簡單的 Dashboard 頁面實作

import React from 'react';
import { Card } from '@/components/ui/card';
import MembersTable from '@/components/MembersTable';
import { useAuth } from '@/hooks/useAuth';

const Dashboard: React.FC = () => {
  const { user } = useAuth();

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">歡迎, {user?.name}</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        <Card>
          <div className="p-4">
            <h2 className="font-bold">總會員數</h2>
            <p className="text-2xl">1,234</p>
          </div>
        </Card>
        {/* 更多統計卡片 */}
      </div>
      <PrivateRoute permission="viewMembers">
        <MembersTable />
      </PrivateRoute>
    </div>
  );
};

export default Dashboard;